<template>
  <div class="permission-form">
    <el-form ref="ResetPasswordVO" :model="ResetPasswordVO" :rules="ResetPasswordVO_Rules" label-position="left" hide-required-asterisk>
      <el-row>
        <el-col :span="18">
          <div class="title-container">
            <h3 class="title">{{ $t('forget.title') }}</h3>
          </div>
        </el-col>
        <el-col :span="6" align="right">
          <el-button type="text" class="back" @click="routerRedirect()">→ {{ $t('forget.back') }}</el-button>
        </el-col>
      </el-row>
      <el-form-item prop="phone">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input v-model="ResetPasswordVO.phone" placeholder="显示手机号码" disabled class="disinput" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input :key="passwordType" ref="password" v-model="ResetPasswordVO.password" :placeholder="$t('rules.passWord')" show-password />
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input :key="confirmPasswordType" ref="confirmPasswordType" v-model="ResetPasswordVO.confirmPassword" :placeholder="$t('rules.confirm')" show-password />
      </el-form-item>
      <el-button :loading="loading" type="primary" @click="submitResetPassword('ResetPasswordVO')">{{ $t('forget.butext') }}</el-button>
    </el-form>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import validator from '@/lib/validate/index.js';
import { translateByCode } from '@/lib/getTransData';
import { ResetPasswordVO } from '@/lib/form/swaggerForm.js';
export default {
  name: 'ResetPassword',
  data () {
    return {
      ResetPasswordVO: new ResetPasswordVO(),
      ResetPasswordVO_Rules: { // 必填项，验证密码格式
        password: [
          validator.required(translateByCode('rules.requiredPassword')),
          {
            validator (rule, value, callback) {
              callback(validator.checkPwd(value, translateByCode('rules.validPassword')));
            },
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          validator.required(translateByCode('rules.requiredPassword')), // 必填项
          {
            validator (rule, value, callback) { // 验证密码格式
              callback(validator.checkPwd(value, translateByCode('rules.validPassword')));
            },
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => { // 两次输入是否一致
              if (value !== this.ResetPasswordVO.password) {
                callback(new Error('erroe'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
            message: translateByCode('rules.different')
          }
        ]
      },
      loading: false
    };
  },
  computed: {
    ...mapState({
      markTelephone: state => state.app.markTelephone
    })
  },
  created() {
    this.ResetPasswordVO.phone = this.markTelephone;
  },
  methods: {
    ...mapActions({ setMarkTelephone: 'app/setMarkTelephone' }),
    // 返回登录
    routerRedirect() {
      this.$router.push({
        name: 'login',
        query: this.$route.query,
        params: this.$route.params
      });
    },
    // 重置密码成功后跳转登录页
    submitResetPassword(form) {
      const that = this;
      this.loading = true;
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.setMarkTelephone(that.ResetPasswordVO.phone);
          // 提交重置后的密码
          // TODO
          this.loading = false;
          this.$message({
            message: translateByCode('alert.resetPassword'),
            type: 'success'
          });
          this.$router.push({
            path: '/login'
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
button {
  width: 100%;
}
.disinput /deep/ .el-input__inner {
  background: transparent;
}
.back {
  text-align: right;
}
</style>
